<template>
    <div
        class="welcome"
        :style="{background: 'url(' + taskDetail.welcomebg + ') bottom right no-repeat'}"
    >
        <div class="part-1-box">
            <el-row :gutter="0">
                <el-col>
                    <h1 class="cn-slogan">{{taskDetail.sloganInChinese}}</h1>
                    <h3 class="en-slogan">{{taskDetail.sloganInEnglish}}</h3>
                </el-col>
            </el-row>
            <el-row :gutter="0">
                <!-- <el-col :span="2" class="empty-box" style="border-bottom: 2px solid #3f3f3f;height: 42px;">
                </el-col>-->
                <div class="sp-line"></div>
            </el-row>
            <el-row :gutter="0">
                <el-col>
                    <p class="task-name">{{taskDetail.templateName}}</p>
                </el-col>
            </el-row>
            <el-row :gutter="0">
                <el-col :span="12">
                    <p class="task-summary">
                        {{taskDetail.introduction}}
                        <el-button
                            v-if="taskDetail.details != ''"
                            @click="showDetail(taskDetail)"
                            type="text"
                        >查看详情</el-button>
                    </p>
                </el-col>
            </el-row>
            <el-row :gutter="0">
                <el-col>
                    <span
                        v-if="taskDetail.hasExtenalLink === 1 && taskDetail.taskStatus !== 0"
                        class="secondary-text"
                        style="font-size: 14px;"
                    >
                        任务地址:
                        <el-button type="text" @click="openWindow">{{taskDetail.extenalLink}}</el-button>
                    </span>
                </el-col>
                <el-col v-if="taskDetail.templateType !== 3">
                    <span class="secondary-text" style="font-size: 14px;">
                        任务期限:
                        <span
                            style=" color: #2876c2; font-weight: bold;"
                        >{{taskDetail.beginTime}} ~ {{taskDetail.endTime | formatDate}}</span>
                    </span>
                </el-col>
            </el-row>
            <el-row
                :gutter="0"
                style="margin-top: 30px;"
                v-if="showBtn && taskDetail.templateType !== 3"
            >
                <el-col v-if="taskDetail.allow === 0 && taskDetail.taskStatus !== 2">
                    <el-popover placement="top-start" title="提示" width="260" trigger="hover">
                        <span>开始时间:</span>
                        {{taskDetail.beginTime}}
                        <el-button slot="reference" type="info" round>未开始</el-button>
                    </el-popover>
                    <el-button
                        v-if="taskDetail.templateType == 2"
                        type="text"
                        @click="teacherApply"
                        style="font-size: 18px; font-weight: bold; margin-left: 16px;"
                    >查看导师简介</el-button>
                </el-col>
                <el-col v-else>
                    <!--<div @click="toDoTask(taskDetail.taskStatus)" class="sub-btn">{{taskDetail.taskStatus | taskStatus}}</div>-->
                    <el-button
                        v-if="taskDetail.taskStatus !== 2"
                        @click="toDoTask(taskDetail.taskStatus)"
                        type="primary"
                        round
                    >{{taskDetail.taskStatus | taskStatus}}</el-button>
                    <el-button
                        v-if="taskDetail.taskStatus === 2"
                        type="primary"
                        round
                        @click="openWindow"
                    >再做一次</el-button>
                    <!-- <el-button type="text" @click="openWindow" style="font-size: 12px; margin-left: 12px;">再做一次</el-button> -->
                </el-col>
            </el-row>
        </div>

        <el-dialog title="任务详情" :visible.sync="dialogVisible" width="80%" append-to-body>
            <div v-if="taskDetail.templateType === 1">
                <div class="title">考试信息</div>
                <el-table class="duohang" :data="examinationNamesList">
                    <el-table-column property="studentId" label="学号" width="100"></el-table-column>
                    <el-table-column property="name" label="姓名" width="100"></el-table-column>
                    <el-table-column property="gender" label="性别" width="50">
                        <template slot-scope="scope" width="50">
                            <span>{{ scope.row.gender | sex}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column property="importFileName" label="考试科目"></el-table-column>
                    <el-table-column property="level" label="分级" width="50"></el-table-column>
                    <el-table-column property="examTime" label="考试时间" width="200"></el-table-column>
                    <el-table-column property="examPos" label="考试教室" width="100"></el-table-column>
                    <el-table-column property="notice" label="考生须知"></el-table-column>
                </el-table>
            </div>
            <div v-if="taskDetail.templateType === 1">
                <div class="title">考试成绩</div>
                <el-table class="duohang" :data="scoreNamesList">
                    <el-table-column property="studentId" label="学号"></el-table-column>
                    <el-table-column property="name" label="姓名"></el-table-column>
                    <el-table-column property="course" label="考试科目"></el-table-column>
                    <el-table-column property="examScore" label="考试成绩"></el-table-column>
                    <el-table-column property="courseSelectSuggest" label="建议课程"></el-table-column>
                </el-table>
            </div>
            <div class="task-detail" v-html="taskDetail.details"></div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">关 闭</el-button>
            </span>
        </el-dialog>
    </div>
</template>
<script>
import { updateTaskStatus, getOneTask } from 'common/src/api/welcomeService/taskTemplate'
import { getScoreList, getExaminationList } from 'common/src/api/welcomeService/examinationTask'
import { mapState, mapActions } from 'vuex'
import filters from 'common/src/filters'

export default {
    name: 'TaskPreview',
    props: {
        taskDetail: {
            // 必须提供字段
            required: true
        },
        showBtn: {
            // 可选字段，有默认值
            default: true
        }
    },
    filters: {
        formatDate(date) {
            return filters.formatDate(date, 'yyyy/MM/dd hh:mm:ss')
        },
        taskStatus(val) {
            return filters.taskStatus(val)
        },
        sex(val) {
            return filters.sexFilter(val)
        }
    },
    data() {
        return {
            dialogVisible: false,
            btnText: '开始任务',
            scoreNamesList: [],
            examinationNamesList: [],
            queryScoreItem: {
                templateId: '',
                studentId: '',
                pageNum_: 1,
                pageSize_: 20
            },
            queryExamItem: {
                templateId: '',
                studentId: '',
                pageNum_: 1,
                pageSize_: 20
            }
        }
    },
    methods: {
        ...mapActions(['getStudentTasks']),
        async showDetail(item) {
            let studentId = this.mockUser ? this.mockUser.uid : localStorage.getItem('uid')
            this.queryScoreItem.templateId = this.taskDetail.templateId
            this.queryExamItem.templateId = this.taskDetail.templateId
            this.queryScoreItem.studentId = studentId
            this.queryExamItem.studentId = studentId
            getScoreList(this.queryScoreItem).then(res => {
                if (res && res.data && res.data.list) {
                    this.scoreNamesList = res.data.list
                }
            })

            getExaminationList(this.queryExamItem).then(res => {
                if (res && res.data && res.data.list) {
                    this.examinationNamesList = res.data.list
                }
            })

            if (!item.details) {
                let currentTask = await getOneTask({ templateId: item.templateId })
                this.taskDetail.details = currentTask.data.details
            }

            this.dialogVisible = true
        },
        async toDoTask(status) {
            let self = this
            if (status === 2) {
                this.taskDetail.taskStatus = status
                return
            }

            if (status === 0 && self.taskDetail.hasExtenalLink === 1) {
                if (self.taskDetail.templateType == 2) {
                    self.$router.push(self.taskDetail.extenalLink)
                } else {
                    let query = {
                        templateId: self.taskDetail.templateId,
                        studentId: this.mockUser ? this.mockUser.uid : localStorage.getItem('uid'),
                        status: (status = status <= 2 ? status + 1 : status)
                    }
                    await updateTaskStatus(query)
                        .then(res => {
                            if (res.code == 200) {
                                window.open(self.taskDetail.extenalLink)
                            }
                        })
                        .catch(err => {})
                }
            }

            let query = {
                templateId: self.taskDetail.templateId,
                studentId: this.mockUser ? this.mockUser.uid : localStorage.getItem('uid'),
                status: (status = status <= 2 ? status + 1 : status)
            }
            await updateTaskStatus(query)
            this.taskDetail.taskStatus = status

            let queryData = {
                studentId: this.mockUser ? this.mockUser.uid : localStorage.getItem('uid')
            }
            await this.getStudentTasks(queryData)
        },
        openWindow() {
            if (this.taskDetail.templateType == 2) {
                this.$router.push(this.taskDetail.extenalLink)
            } else {
                window.open(this.taskDetail.extenalLink)
            }
        },
        teacherApply() {
            this.$router.push('/teacherApply')
        },
        welcomeTaskComplete() {
            let isWeclcomeTask =
                this.taskDetail.templateName == '新生任务指引' && this.taskDetail.taskStatus != 2
            if (isWeclcomeTask) {
                let query = {
                    templateId: this.taskDetail.templateId,
                    studentId: this.mockUser ? this.mockUser.uid : localStorage.getItem('uid'),
                    status: 2
                }
                updateTaskStatus(query).then(res => {
                    if (res) {
                        let queryData = {
                            studentId: this.mockUser
                                ? this.mockUser.uid
                                : localStorage.getItem('uid')
                        }
                        this.getStudentTasks(queryData)
                    }
                })
            }
        }
    },
    computed: {
        ...mapState({
            mockUser: state => state.session.mockUser
        })
    },
    watch: {
        taskDetail(val, oldval) {
            this.welcomeTaskComplete()
        }
    },
    created() {
        this.welcomeTaskComplete()
    }
}
</script>
<style scoped>
/* .part-1-box{padding: 54px 0;} */
.welcome {
    padding-left: 24px;
    min-height: 624px;
    height: 100%;
}
.cn-slogan {
    font-size: 48px;
    line-height: 80px;
    margin: 0;
    background-image: -webkit-gradient(
        linear,
        left 0,
        right 0,
        from(rgb(4, 94, 170)),
        to(rgb(19, 194, 194))
    );
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.en-slogan {
    font-size: 17px;
    line-height: 17px;
    margin: 0;
    color: #aaaaaa;
}

.sp-line {
    height: 4px;
    width: 65px;
    margin: 43px 0 6px;
    background-image: -webkit-gradient(
        linear,
        left 0,
        right 0,
        from(rgb(4, 94, 170)),
        to(rgb(19, 194, 194))
    );
}

.task-name {
    font-size: 24px;
    line-height: 52px;
    color: #666666;
    margin: 0;
}

.task-summary {
    width: 300px;
    font-size: 14px;
    line-height: 22px;
    color: #999999;
    margin: 0;
    word-break: break-word;
}

.task-detail > p > img {
    width: 100%;
}

.title {
    font-size: 16px;
    font-weight: bold;
    line-height: 32px;
    margin: 10px 0;
}

.sub-btn {
    cursor: pointer;
    width: 128px;
    height: 40px;
    padding: 0 30px;
    line-height: 40px;
    background-color: #2876c2;
    border-radius: 19px;
    font-size: 16px;
    color: #ffffff;
    text-align: center;
}
</style>
